<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增图片视频上传示例')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-imageDemo-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">单图片：</label>
            <input id="image" name="image" class="form-control" type="hidden" required>
            <div class="col-sm-8">
                <div class="file-loading">
                    <input id="fileInput" name="file" type="file" multiple>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">多图片：</label>
            <div class="col-sm-8">
                <input id="images" name="images" class="form-control" type="hidden" required>
                <div class="file-loading">
                    <input id="filesInput" name="file" type="file" multiple>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">单视频：</label>
            <div class="col-sm-8">
                <input id="video" name="video" class="form-control" type="hidden" required>
                <div class="file-loading">
                    <input id="videoInput" name="file" type="file" multiple>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">多视频：</label>
            <div class="col-sm-8">
                <input id="videos" name="videos" class="form-control" type="hidden">
                <div class="file-loading">
                    <input id="videosInput" name="file" type="file" multiple>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "web/imageDemo"
    $("#form-imageDemo-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-imageDemo-add').serialize());
        }
    }


    // 多视频上传成功后回调值存储到这个变量中
    var videosUploadResult = '';
    // 多视频上传组件
    $(document).ready(function () {
        $("#videosInput").fileinput({
            theme: 'explorer-fas',
            uploadUrl: ctx + 'app/upload',
            overwriteInitial: true,
            initialPreviewAsData: true,
            uploadAsync: true, // 异步上传
            minFileCount: 1, // 上传最小数量
            maxFileCount: 3, //上传最大数量
            autoReplace: true, // 自动替换当前图片
            previewFileType: 'video', // 预览类型
            allowedFileTypes: 'mp4',
            maxFileSize: 2048000 // 文件大小限制 最大2M
        });
    });
    // 图片上传成功后回调
    $("#videosInput").on("fileuploaded", function (event, data, previewId, index) {
        if (data.response.status === 'success') {
            if (videosUploadResult === "") {
                videosUploadResult += data.response.message;
            } else {
                videosUploadResult += "," + data.response.message;
            }
            $("#videos").val(videosUploadResult);
            $.modal.msgSuccess("上传成功！");
        } else {
            $.modal.msgError("上传错误！");
        }
    });


    // 多图片上传成功后回调值存储到这个变量中
    var imagesUploadResult = '';
    // 多图片上传组件
    $(document).ready(function () {
        $("#filesInput").fileinput({
            theme: 'explorer-fas',
            uploadUrl: ctx + 'app/upload',
            overwriteInitial: true,
            initialPreviewAsData: true,
            uploadAsync: true, // 异步上传
            minFileCount: 1, // 上传最小数量
            // maxFileCount: 20, //上传最大数量
            autoReplace: true, // 自动替换当前图片
            maxFileSize: 20480 // 文件大小限制 最大2M
        });
    });
    // 多图片上传成功后回调
    $("#filesInput").on("fileuploaded", function (event, data, previewId, index) {
        if (data.response.status === 'success') {
            if (imagesUploadResult === "") {
                imagesUploadResult += data.response.message;
            } else {
                imagesUploadResult += "," + data.response.message;
            }
            $("#images").val(imagesUploadResult);
            $.modal.msgSuccess("上传成功！");
        } else {
            $.modal.msgError("上传错误！");
        }
    });


    // 单视频上传成功后回调值存储到这个变量中
    var videoUploadResult = '';
    // 单视频上传组件
    $(document).ready(function () {
        $("#videoInput").fileinput({
            theme: 'explorer-fas',
            uploadUrl: ctx + 'app/upload',
            overwriteInitial: true,
            initialPreviewAsData: true,
            uploadAsync: true, // 异步上传
            minFileCount: 1, // 上传最小数量
            maxFileCount: 1, //上传最大数量
            autoReplace: true, // 自动替换当前图片
            previewFileType: 'video', // 预览类型
            allowedFileTypes: 'mp4',
            maxFileSize: 2048000 // 文件大小限制 最大2M
        });
    });
    // 单视频上传成功后回调
    $("#videoInput").on("fileuploaded", function (event, data, previewId, index) {
        if (data.response.status === 'success') {
            videoUploadResult = data.response.message;
            $("#video").val(videoUploadResult);
            $.modal.msgSuccess("上传成功！");
        } else {
            $.modal.msgError("上传错误！");
        }
    });

    // 单图片上传成功后回调值存储到这个变量中
    var imageUploadResult = '';
    // 单图片上传组件
    $(document).ready(function () {
        $("#fileInput").fileinput({
            theme: 'explorer-fas',
            uploadUrl: ctx + 'app/upload',
            overwriteInitial: false,
            initialPreviewAsData: true,
            uploadAsync: true, // 异步上传
            minFileCount: 1, // 上传最小数量
            maxFileCount: 1, //上传最大数量
            autoReplace: true, // 自动替换当前图片
            maxFileSize: 20480 // 文件大小限制 最大2M
        });
    });
    // 单图片上传成功后回调
    $("#fileInput").on("fileuploaded", function (event, data, previewId, index) {
        if (data.response.status === 'success') {
            imageUploadResult = data.response.message;
            $("#image").val(imageUploadResult);
            $.modal.msgSuccess("上传成功！");
        } else {
            $.modal.msgError("上传错误！");
        }
    });
</script>
</body>
</html>